<template>
  <view>
    <view class="title">欢迎使用</view>
    <view class="user-reg">用户注册</view>
    <form class="regForm" @submit="regis">
      <view class="form-item">
        <view class="item-header">
          <view class="iconfont icon-shouji"></view>
          <text>手机号</text>
        </view>
        <input v-model="info.phoneNum" type="text" name="phone" placeholder="请输入手机号">
      </view>
      <view class="form-item">
        <view class="item-header">
          <view class="iconfont icon-mima"></view>
          <text>密码</text>
        </view>
        <input v-model="info.password" type="password" name="password" placeholder="请输入密码">
      </view>
      <view class="form-item">
        <view class="item-header">
          <view class="iconfont icon-mima"></view>
          <text>确认密码</text>
        </view>
        <input v-model="info.qPassword" type="password" name="qpassword" placeholder="请输入确认密码">
      </view>
      <button :disabled="isDisabled" class="submit" form-type="submit">注册</button>
    </form>
  </view>
</template>

<script>
  import {
    userRegister
  } from '../../request/api.js'
  export default {
    data() {
      return {
        isDisabled: true,
        info: {
          phoneNum: '',
          password: '',
          qPassword: ''
        }
      }
    },
    // 监听数据
    watch: {
      'info.phoneNum'(newVal, oldVal) {
        this.checkDisable();
      },
      'info.password'(newVal, oldVal) {
        this.checkDisable();
      },
      'info.qPassword'(newVal, oldVal) {
        this.checkDisable();
      }
    },
    methods: {
      // 表单验证
      checkDisable() {
        const phoneReg = /^1[3-9]\d{9}$/;
        if (phoneReg.test(this.info.phoneNum) && this.info.password.length >= 6 && this.info.password === this.info.qPassword) {
          this.isDisabled = false;
          // console.log(1111111111111111);
        } else {
          this.isDisabled = true;
          // console.log(2222222222222222);
        }
      },
      // 注册逻辑
      regis(e) {
        console.log(e)
        this.info.phoneNum = e.detail.value.phone
        this.info.password = e.detail.value.password
        userRegister(this.info).then((res) => {
          // console.log('cg', res)
          uni.showToast({
            icon: 'success',
            title: '注册成功！'
          })
        }).catch((err) => {
          // console.log('sb', err)
          uni.showToast({
            icon: 'error',
            title: '注册失败...'
          })
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }, 800)
      }
    }
  }
</script>

<style>
  page {
    background-image: linear-gradient(#B3D0EE, #E3EDF9);
  }

  .title {
    font-size: 48rpx;
    font-weight: 550;
    margin: 30rpx 0 50rpx 5%;
  }

  .user-reg {
    font-size: 36rpx;
    font-weight: 550;
    margin-left: 5%;
    margin-bottom: 40rpx;
  }

  .regForm {
    width: 90%;
    /*将内敛元素 变成块元素*/
    display: block;
    margin: 0 auto;
    padding: 10rpx 0 40rpx 0;
    box-sizing: border-box;
    background: #fff;
    border-radius: 10rpx;
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
  }

  .submit {
    width: 90%;
    border-radius: 100rpx;
    background: #a6c5fc;
    color: #fff;
    margin-top: 100rpx;
  }

  .form-item {
    width: 100%;
    border-bottom: 1px solid #eee;
  }

  .item-header {
    width: 100%;
    height: 50rpx;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    margin-top: 30rpx;
  }

  .form-item input {
    width: 100%;
    height: 66rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
  }

  .item-header text {
    margin-left: 8rpx;
  }

  .item-header .iconfont {
    color: #91a5f9;
    font-size: 36rpx;
  }
</style>